<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - FooTable</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/plugins/footable/footable.core.css}" rel="stylesheet">
    <link href="asserts/css/bootstrap-select.min.css" rel="stylesheet"
          th:href="@{/asserts/css/bootstrap-select.min.css}">

    <link th:href="@{/asserts/css/animate.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/asserts/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <input type ="file" id="importExcel" name= "file" style=" display: none" />

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>搜索</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content ">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="col-sm-10 mt-4">
                                <label class="col-sm-2 my-font-bold">单位名称</label>
                                <div class="col-sm-2">
                                    <input id="unitname" name="unitname" type="text" class="form-control required">
                                </div>

                                <label class="col-sm-2 my-font-bold">境内外标志</label>
                                <div class="col-sm-2">
                                    <select class="selectpicker" id="domain" data-live-search="false" name="domain">
                                        <option value="">请选择</option>
                                        <option value="境内">境内</option>
                                        <option value="境外">境外</option>
                                    </select>
                                </div>

                            </div>
                            <div class="col-sm-2">
                                <div class="form-group text-right">
                                    <button class="btn btn-success" type="button" onclick="createTable()">查询</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>企业基本信息</h5>
                    <div class="text-right">
                            <a class="btn btn-success pull-right btn-sm badge-pill mb-1 m-1-sm" onclick="$('#importExcel').click();"><i
                                    class="fa fa-cloud-upload"> </i>导入</a>
                            <a class="btn btn-success pull-right btn-sm badge-pill mb-1 m-1-sm" style="margin-right: 4px;" onclick="exportExcel()"><i
                                    class="fa fa-cloud-download"> </i>导出</a>
                    </div>
                </div>
                <div class="ibox-content">
                    <a class="btn btn-warning  btn-sm badge-pill mb-1" href="javascript:goAdd()"><i
                            class="fa fa-plus"> </i> [[#{message.add}]]</a>
                    <div class="table-responsive">
                        <table id="table">
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/asserts/js/jquery.min.js}"></script>
<script th:src="@{/asserts/js/bootstrap.min.js}"></script>
<script th:src="@{/asserts/js/plugins/footable/footable.all.min.js}"></script>
<script th:src="@{/asserts/js/content.min.js}"></script>
<script th:src="@{/asserts/js/layer/layer.min.js}" type="text/javascript"></script>
<script th:src="@{/asserts/js/bootstrap-table/bootstrap-table.min.js?v=1}"></script>
<script th:src="@{/asserts/js/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<script src="asserts/js/bootstrap-select.min.js" th:src="@{/asserts/js/bootstrap-select.min.js}"
        type="text/javascript"></script>
<script th:src="@{/asserts/js/ajaxfileupload.js}"></script>

<script th:replace="common/myJs::myCommonJs"></script>
<script th:inline="javascript">
    $(function () {
        createTable();
        var url = [[@{'/orgbase/importExcel.xlsx'}]];
        $('body').on('change','#importExcel',function(){
            var importingExcelIndex=layer.load(1);
            $.ajaxFileUpload({
                type: "POST",
                url: url,
                // data:{picParams:text},//要传到后台的参数，没有可以不写
                secureuri : false,//是否启用安全提交，默认为false
                fileElementId:'importExcel',//文件选择框的id属性
                dataType: 'text',//服务器返回的格式
                async : false,
                complete: function(data){
                    $('#importExcel').val('');
                    layer.close(importingExcelIndex);
                },
                success: function (text) {
                    var resultData = JSON.parse(text);
                    var message = '';
                    if (!$.isArray(resultData)) {
                        if(typeof resultData == 'string'){
                            layer.alert(resultData, {title: '导入失败', icon: 2});
                        }else{
                            if(resultData['add']+resultData['update']>0){
                                message = '新增' + resultData['add'] + '项, ' + '修改' + resultData['update'] + '项';
                                layer.alert(message, {title: '导入成功', icon: 1}, function () {
                                    location.reload();
                                });
                            }else{
                                layer.alert('列表为空', {title: '未导入', icon: 0});
                            }
                        }
                    } else {
                        for (var i = 0; i < resultData.length; i++) {
                            message += resultData[i] + '<br/>';
                        }
                        layer.alert(message, {title: '导入失败', icon: 2});
                    }
                },
                error: function (data, status, e){
                    layer.alert('导入错误');
                }
            });
        });
    });

    function resetTable() {
        createTable()
    }

    function detailFormatter(index, row) {
        var html = [];
        html.push('<p><h3>企业基本信息</h3>')
        $.each(row, function (key, value) {
            if(key=='unitname'){
                html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>单位名称:</b> ' + value + '</p>')
            }
            if(key=='domainName'){
                html.push('<p><b>境内外标志:</b> ' + value)
            }
            if(key=='unittypeName'){
                html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>单位类型:</b> ' + value)
            }
            //html.push('<p><b>'+key+':</b> ' + value + '</p>')
        });
        html.push('<p><h3>股权结构信息</h3>');
        $.each(row, function (key, value) {
            if(key=='stockList'){
                for(var i=0;i<value.length;i++){
                    html.push('<p><b>股东名称:</b> ' + value[i].shareholdername)
                    html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>股东国别:</b> ' + value[i].nationalityName)
                    html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>股东性质:</b> ' + value[i].natureName+ '</p>')
                }
            }
        });
        html.push('<p><h3>人员信息</h3>')
        $.each(row, function (key, value) {
            if(key=='personnelList'){
                for(var i=0;i<value.length;i++){
                    html.push('<p><b>联系人姓名:</b> ' + value[i].contactsname)
                    html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>企业联系人电话:</b> ' + value[i].contactsphone)
                    html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>邮箱:</b> ' + value[i].email+ '</p>')
                }
            }
        });

        html.push('<p><h3>参股企业信息</h3>')
        $.each(row, function (key, value) {
            if(key=='participationList'){
                for(var i=0;i<value.length;i++){
                    html.push('<p><b>单位名称:</b> ' + value[i].enterprisename)
                    html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>单位类型:</b> ' + value[i].enterprisetypeName)
                    html.push('&nbsp;&nbsp;&nbsp;&nbsp;<b>境内/境外:</b> ' + value[i].regionName+ '</p>')
                }
            }
        });
        return html.join('');
    }

    function onExpand(data) {
        for (var i = 0; i < data.total; i++)
            $('#table').bootstrapTable('toggleDetailView', i);//展开详情行
    }

    function exportExcel(){
        let url = [[@{'/orgbase/exportExcel.xlsx'}]]+'?';;
        let param = {
            unitname: $('#unitname').val(),
            domain: $('#domain').val()
        };
        for(p in param){
            url+='&'+p+'='+param[p];
        }
        window.open(url);
    }

    function createTable() {
        let url = [[@{'/orgbase/list'}]];
        $("#table").bootstrapTable('destroy');
        $("#table").bootstrapTable({
            url: url,        //请求后台的URL（*）
            method: 'post',                      //请求方式（*）
            contentType: "application/x-www-form-urlencoded",
            pagination: true,                   //是否显示分页（*）
            cache: false,
            detailView: true, //1，开启详情视树形图模式
            detailFormatter: "detailFormatter", //2，定义详情显示函数
            pageSize: 10,//每页一条数据
            striped: true,  //表格显示条纹
            dataField: "list",
            queryParamsType: "undefined",
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    unitname: $('#unitname').val(),
                    domain: $('#domain').val()
                };
                return param;
            },
            onLoadSuccess: function (data) {
                onExpand(data);
            },
            sidePagination: 'server',
            pageNumber: 1,
            columns: [{
                field: "id",
                visible: false
            }, {
                field: "unitname",
                title: "单位名称"
            }, {
                field: "creditcode",
                title: "统一社会信用代码"
            }, {
                field: "domainName",
                title: "境内外标志"
            }, {
                field: "unittypeName",
                title: "单位类型"
            }, {
                field: "enterprisetypeName",
                title: "企业类型"
            }, {
                field: "cz",
                title: "操作",
                width: "20%",
                formatter: function (value, row) {
                    var editHtml = '<a href="javascript:;" class="btn btn-success edit"><i class="fa fa-pencil"> </i> 编辑</a>&nbsp;';
                    var delHtml = '<a href="javascript:;" class="btn btn-danger del"><i class="fa fa-trash"> </i> 删除</a>&nbsp;';

                    var gqhtml = '<a href="javascript:;" class="btn btn-info audit"><i class="fa fa-send"> </i> 股权结构信息</a>&nbsp;';
                    var ryhtml = '<a href="javascript:;" class="btn btn-info pepo"><i class="fa fa-server"> </i> 人员信息</a>&nbsp;';
                    var qyhtml = '<a href="javascript:;" class="btn btn-info ent"><i class="fa fa-question"> </i> 参股企业信息</a>&nbsp;';

                    var buttonhtml = editHtml + delHtml + gqhtml + ryhtml + qyhtml;
                    return buttonhtml;
                },
                events: {
                    'click .edit': function (e, value, row, index) {
                        var id = row.id;
                        location.href = 'goedit?id=' + id;
                    },
                    'click .del': function (e, value, row, index) {
                        var id = row.id;
                        var url = 'delete';

                        $('#confirmModal').modal("show");
                        $("#confirmDelete").click(function () {
                            $.ajax({
                                url: url,
                                data: 'id=' + id,
                                type: "post",
                                success: function (data) {
                                    createTable();
                                }
                            });
                            $('#confirmModal').modal("hide");
                        });
                    },

                    'click .audit': function (e, value, row, index) {
                        var id = row.id;
                        url = [[@{'/stock/go?id='}]];
                        location.href = url + id;
                    },

                    'click .pepo': function (e, value, row, index) {
                        var id = row.id;
                        url = [[@{'/personnel/go?id='}]];
                        location.href = url + id;
                    },

                    'click .ent': function (e, value, row, index) {
                        var id = row.id;
                        url = [[@{'/particip/go?id='}]];
                        location.href = url + id;
                    }
                }
            }]
        });
    }


    function goAdd() {
        location.href = [[@{'/orgbase/goadd'}]];
    }
</script>
</body>

</html>

<div th:fragment="showConfirm" xmlns:th="http://www.w3.org/1999/xhtml">
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">确认删除</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <button type="button" class="btn btn-default cancel" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary del" id="confirmDelete">确认删除</button>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>